<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前端 | WEB | VUE">
<meta property="og:type" content="website">
<meta property="og:title" content="Storm">
<meta property="og:url" content="https://storm4542.github.io/page/2/index.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="前端 | WEB | VUE">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Storm">
<meta name="twitter:description" content="前端 | WEB | VUE">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main">
  
    <article id="post-mongoose-使用" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="273360f2.html">mongoose 使用</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="273360f2.html" class="article-date">
  <time datetime="2018-09-30T08:22:53.000Z" itemprop="datePublished">2018-09-30</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-命令行中创建并启动数据库"><a href="#1-命令行中创建并启动数据库" class="headerlink" title="1. 命令行中创建并启动数据库"></a>1. 命令行中创建并启动数据库</h3><ol>
<li>指定存储的位置和端口号</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mongod --dbpath --port=27018  code/mongo_demo</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>另开一个命令行窗口，进入 code/mongo_demo</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mongo</span><br></pre></td></tr></table></figure>
<h3 id="2-使用-mongoose-链接数据库并创建-Collection"><a href="#2-使用-mongoose-链接数据库并创建-Collection" class="headerlink" title="2. 使用 mongoose 链接数据库并创建 Collection"></a>2. 使用 mongoose 链接数据库并创建 Collection</h3><ol>
<li><p>链接数据库</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> mongoose = <span class="built_in">require</span>(<span class="string">'mongoose'</span>);</span><br><span class="line"><span class="keyword">const</span> Schema = mongoose.Schema;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> uri = <span class="string">'mongodb://localhost/what_i_love'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> ObjectId = Schema.Types.ObjectId;</span><br><span class="line"></span><br><span class="line">mongoose.set(<span class="string">'useCreateIndex'</span>, <span class="literal">true</span>)</span><br><span class="line"></span><br><span class="line">mongoose.Promise = <span class="built_in">Promise</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> connection = mongoose.connect(uri, &#123;<span class="attr">useNewUrlParser</span>: <span class="literal">true</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> db = mongoose.connection;</span><br></pre></td></tr></table></figure>
</li>
<li><p>创建 Collection</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> UserSchema = <span class="keyword">new</span> Schema(&#123;</span><br><span class="line">    name: &#123;<span class="attr">type</span>: <span class="built_in">String</span>, <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">unique</span>: <span class="literal">true</span>, <span class="attr">index</span>: <span class="number">1</span>&#125;,</span><br><span class="line">    age: &#123;<span class="attr">type</span>: <span class="built_in">Number</span>, <span class="attr">required</span>: <span class="literal">true</span>, <span class="attr">max</span>: <span class="number">199</span>, <span class="attr">min</span>: [<span class="number">0</span>,<span class="string">'你还没生出来呢'</span>]&#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> UserModel = mongoose.model(<span class="string">'user'</span>, UserSchema);</span><br><span class="line"><span class="comment">//创建一个叫做 user 的 collection</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>操作 Collection</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">insert</span>(<span class="params">userInfo</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> UserModel.create(userInfo)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getOneById</span>(<span class="params">id</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> UserModel.findOne(&#123;</span><br><span class="line">        _id: id</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getOneByName</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> UserModel.findOne(&#123;</span><br><span class="line">        name</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">list</span>(<span class="params">params</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> match = &#123;&#125;</span><br><span class="line">    <span class="keyword">const</span> flow = UserModel.find(match)</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">await</span> flow.exec()</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    insert,</span><br><span class="line">    getOneById,</span><br><span class="line">    getOneByName,</span><br><span class="line">    list,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="3-使用中"><a href="#3-使用中" class="headerlink" title="3. 使用中"></a>3. 使用中</h3><p> 一般来说链接数据库的方法单独放在一个地方。（第一步操作）</p>
<p>创建 Collection 并 操作Collection 放在一个地方。(第二步操作)</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-NodeJS-库-持续更新" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="1dd248d5.html">NodeJS 库 (持续更新)</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="1dd248d5.html" class="article-date">
  <time datetime="2018-09-30T08:22:41.000Z" itemprop="datePublished">2018-09-30</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-加密-解密-工具"><a href="#1-加密-解密-工具" class="headerlink" title="1.加密 解密 工具"></a>1.加密 解密 工具</h3><ul>
<li>bcrypt </li>
</ul>
<p>  加密</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> saltRounds = <span class="number">10</span>; <span class="comment">//加密轮数</span></span><br><span class="line"><span class="keyword">let</span> password = userInfo.password <span class="comment">//密码</span></span><br><span class="line">bcrypt.genSalt(saltRounds, <span class="function"><span class="keyword">function</span> (<span class="params">err, salt</span>) </span>&#123;</span><br><span class="line">        bcrypt.hash(password, salt, <span class="function"><span class="keyword">function</span> (<span class="params">err, hash</span>) </span>&#123;</span><br><span class="line">            <span class="comment">//把hash值赋值给password变量</span></span><br><span class="line">            password = hash;</span><br><span class="line">            storeUInfo(&#123; <span class="comment">//存储</span></span><br><span class="line">                username: userInfo.username,</span><br><span class="line">                password,</span><br><span class="line">                name: userInfo.name,</span><br><span class="line">                age: userInfo.age</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br></pre></td></tr></table></figure>
<p>  解密验证</p>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">login</span>(<span class="params">userInfo</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> user = <span class="keyword">await</span> UserModel.findOne(&#123; <span class="comment">//从数据库中找到该用户</span></span><br><span class="line">        username: userInfo.username</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">const</span> match = <span class="keyword">await</span> bcrypt.compare(userInfo.password, user.password) <span class="comment">// 看看 密码是否相同</span></span><br><span class="line">    <span class="keyword">if</span> (match) &#123;</span><br><span class="line">        <span class="keyword">return</span> user</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> HttpParamError(<span class="string">'user'</span>, <span class="string">'用户名密码错误'</span>, <span class="string">'username password error'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Vue父子传参的方式" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="a431a66.html">Vue父子传参的方式</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="a431a66.html" class="article-date">
  <time datetime="2018-09-09T07:59:07.000Z" itemprop="datePublished">2018-09-09</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>感觉Vue中父子传参的方式，实在是太多了，于是做一个小总结，只是总结我所知道的。</p>
<h3 id="1-父传子"><a href="#1-父传子" class="headerlink" title="1.父传子"></a>1.父传子</h3><p>基本就用一个方式，<code>props</code></p>
<p>父亲通过在 <strong>标签</strong> 中写入需要传入的数据。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--father.vue--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        我是爸爸，下面是儿子</span><br><span class="line">        <span class="tag">&lt;<span class="name">son</span> <span class="attr">title</span>=<span class="string">'儿子'</span> <span class="attr">:selected</span>=<span class="string">'selected'</span>&gt;</span><span class="tag">&lt;/<span class="name">son</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>儿子在 实例中的 <code>props</code> 选项中获取</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//son.vue</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">'son'</span>,</span><br><span class="line">    props:&#123;</span><br><span class="line">        selected:&#123;</span><br><span class="line">            type:<span class="built_in">Boolean</span></span><br><span class="line">        &#125;,</span><br><span class="line">        title:&#123;</span><br><span class="line">            type:<span class="built_in">String</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="2-子传父"><a href="#2-子传父" class="headerlink" title="2.子传父"></a>2.子传父</h3><h4 id="update-my-prop-name-模式"><a href="#update-my-prop-name-模式" class="headerlink" title="# update:my-prop-name 模式"></a># <code>update:my-prop-name</code> 模式</h4><p>Vue 是单项数据流，所以不允许 儿子 直接修改父亲的数据，也不允许儿子直接修改自己的<code>props</code>。</p>
<p>假设一个情况，点击儿子，儿子需要改变 <code>selected</code> 的状态。</p>
<p><strong>儿子方面</strong></p>
<p>触发点击事件后， 让儿子触发一个 <code>update</code> 事件，把新的 <code>selected</code> 传出去</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--son.vue--&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div class=&quot;son&quot; @click=&quot;onClick&quot;&gt;</span><br><span class="line">        title:&#123;&#123;title&#125;&#125; selected:&#123;&#123;selected&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;son&quot;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    selected: &#123;</span><br><span class="line">      type: Boolean</span><br><span class="line">    &#125;,</span><br><span class="line">    title: &#123;</span><br><span class="line">      type: String</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    onClick() &#123;</span><br><span class="line">      this.$emit(&quot;update:selected&quot;, !this.selected); //关键点</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">.son &#123;</span><br><span class="line">  border: 1px solid red;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p><strong>父亲方面</strong></p>
<p>在标签中监听 <code>update</code>事件，并将传过来的 <code>$event</code>付给 <code>selected</code>，这样就完成了一次传参。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--father.vue--&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        我是爸爸，下面是儿子</span><br><span class="line">        &lt;son title=&apos;儿子&apos; :selected=&apos;selected&apos; @update:selected=&apos;selected=$event&apos;&gt;&lt;/son&gt; </span><br><span class="line">        &lt;!--关键点--&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import Son from &quot;./son&quot;;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;father&quot;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Son</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      selected: true</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>简单方式</p>
<p><strong>.sync 修饰符</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--father.vue--&gt;</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        我是爸爸，下面是儿子</span><br><span class="line">        &lt;son title=&apos;儿子&apos; :selected.sync=&apos;selected&apos;&gt;&lt;/son&gt; </span><br><span class="line">        &lt;!--关键点--&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h4 id="parents-API"><a href="#parents-API" class="headerlink" title="#  $parents API"></a>#  $parents API</h4><p><strong>儿子方面</strong></p>
<p>从 <code>this.$parent</code>中可以获取到 父组件 的 data 数据 ，直接进行修改，是不是很刺激。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    onClick() &#123;</span><br><span class="line">      <span class="keyword">this</span>.$parent.selected = !<span class="keyword">this</span>.$parent.selected;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>虽然刺激，<strong>但是，我建议调用父组件的函数，来切换状态。</strong></p>
<p><strong>父亲方面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//father.vue</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  name: <span class="string">"father"</span>,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Son</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      selected: <span class="literal">true</span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    changeSelected() &#123;</span><br><span class="line">      <span class="keyword">this</span>.selected = !<span class="keyword">this</span>.selected;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><strong>儿子方面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//son.vue </span></span><br><span class="line">methods: &#123;</span><br><span class="line">    onClick() &#123;</span><br><span class="line">      <span class="keyword">this</span>.$parent.changeSelected();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h4 id="EventBus"><a href="#EventBus" class="headerlink" title="# EventBus"></a># EventBus</h4><p>如果只是一个父亲，一个儿子上面的方法非常的简单实用，但是如果是祖孙三代传参呢？上面的方法就很麻烦了。</p>
<p>具体怎么麻烦，可以看一下我的这篇文章，用原始的方法造 tabs轮子:<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">https://zhuanlan.zhihu.com/p/39601572</a> </p>
<p>废话不多说，开始用 EventBus做一个简单的 tabs组件。</p>
<h5 id="app-vue"><a href="#app-vue" class="headerlink" title="#app.vue"></a>#app.vue</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;tab selected=&apos;news&apos;&gt;</span><br><span class="line">      &lt;tab-item name=&apos;news&apos;&gt;新闻&lt;/tab-item&gt;</span><br><span class="line">      &lt;tab-item name=&apos;car&apos;&gt;汽车&lt;/tab-item&gt;</span><br><span class="line">      &lt;tab-item name=‘code’&gt;代码&lt;/tab-item&gt;</span><br><span class="line"></span><br><span class="line">      &lt;tab-pane name=&apos;news&apos;&gt;新闻列表&lt;/tab-pane&gt;</span><br><span class="line">      &lt;tab-pane name=&apos;car&apos;&gt;汽车列表&lt;/tab-pane&gt;</span><br><span class="line">      &lt;tab-pane name=‘code’&gt;代码列表&lt;/tab-pane&gt;</span><br><span class="line">    &lt;/tab&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import Tab from &quot;./components/tabs.vue&quot;;</span><br><span class="line">import TabItem from &quot;./components/tab-item&quot;;</span><br><span class="line">import TabPane from &quot;./components/tab-pane&quot;;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;app&quot;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Tab,</span><br><span class="line">    TabItem,</span><br><span class="line">    TabPane</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="tabs-vue"><a href="#tabs-vue" class="headerlink" title="# tabs.vue"></a># tabs.vue</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import TabItem from &quot;./tab-item.vue&quot;;</span><br><span class="line">import Vue from &quot;vue&quot;;  //引入VUE</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;tab&quot;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    selected: &#123;</span><br><span class="line">      type: [Number, String]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      eventBus: new Vue() // 创建 eventBus</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  provide() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      eventBus: this.eventBus // 提供 eventBus</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.eventBus.$emit(&quot;update:selected&quot;, this.selected); </span><br><span class="line">      //发布消息，告诉大家，现在的selected是啥</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h5 id="tabs-item-vue"><a href="#tabs-item-vue" class="headerlink" title="# tabs-item.vue"></a># tabs-item.vue</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div @click=&quot;onClick&quot; :class=&quot;&#123;active&#125;&quot;&gt;</span><br><span class="line">        &lt;slot/&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;tab-item&quot;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    name: &#123;</span><br><span class="line">      type: [String, Number]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  inject: [&quot;eventBus&quot;], //注入 eventBus</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      active: false</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  created() &#123;</span><br><span class="line">    this.eventBus.$on(&quot;update:selected&quot;, newSelected =&gt; &#123;</span><br><span class="line">      this.active = this.name === newSelected;</span><br><span class="line">    &#125;); //接收消息，如果newselected 和我的 name 相同，那么我就被选中了</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    onClick() &#123;</span><br><span class="line">      this.eventBus.$emit(&quot;update:selected&quot;, this.name);</span><br><span class="line">        //发布消息，如果点击了我，我就告诉大家，我被选中了</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">.active &#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h5 id="tab-pane-vue"><a href="#tab-pane-vue" class="headerlink" title="# tab-pane.vue"></a># tab-pane.vue</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div v-if=&quot;active&quot; class=&quot;pane&quot;&gt;</span><br><span class="line">    &lt;slot/&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;tab-pane&quot;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    name: &#123;</span><br><span class="line">      type: [String, Number]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      active: false</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  inject: [&quot;eventBus&quot;],//注入 eventBus</span><br><span class="line">  created() &#123;</span><br><span class="line">    this.eventBus.$on(&quot;update:selected&quot;, newSelected =&gt; &#123;</span><br><span class="line">      this.active = this.name === newSelected;</span><br><span class="line">    &#125;);</span><br><span class="line">      //接收消息，如果newselected 和我的 name 相同，那么我就被选中了</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">.pane &#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h4 id="灵活运用-provide-inject"><a href="#灵活运用-provide-inject" class="headerlink" title="# 灵活运用 provide inject"></a># 灵活运用 provide inject</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//father.vue</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">'father'</span>,</span><br><span class="line">    data()&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            someThing:<span class="string">'father'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    provide()&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            father:<span class="keyword">this</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//son.vue</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">'son'</span>,</span><br><span class="line">    inject:[<span class="string">'father'</span>],</span><br><span class="line">    methods:&#123;</span><br><span class="line">        onClick()&#123;</span><br><span class="line">            <span class="keyword">this</span>.father.someThing = <span class="string">'son'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-关于JavaScript日期的一些小技巧" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="9fa8d30b.html">关于JavaScript日期的一些小技巧</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="9fa8d30b.html" class="article-date">
  <time datetime="2018-08-28T15:17:42.000Z" itemprop="datePublished">2018-08-28</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>最近在做小程序，要做一些关于日期方面的计算，于是整理下来，方便下次使用</p>
<h4 id="1-获得年月日"><a href="#1-获得年月日" class="headerlink" title="1. 获得年月日"></a>1. 获得年月日</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">newDateInit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">  <span class="keyword">let</span> month = newDate.getMonth();</span><br><span class="line">  <span class="keyword">if</span> (month &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    month = <span class="string">"0"</span> + month; <span class="comment">//补齐</span></span><br><span class="line">  &#125;</span><br><span class="line">  day = newDate.getDate();</span><br><span class="line">  <span class="keyword">if</span> (newDate.getDate() &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    day = <span class="string">"0"</span> + day; <span class="comment">//补齐</span></span><br><span class="line">  &#125;</span><br><span class="line">  year = newDate.getFullYear();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-计算前一天，后一天"><a href="#2-计算前一天，后一天" class="headerlink" title="2.计算前一天，后一天"></a>2.计算前一天，后一天</h4><p>一开始我考虑假如我现在是 1 号，前一天不就是 0 了吗？其实不用考虑这么多，JS 帮我们做好了判断。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> currentDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">var</span> currentDay = currentDate.getDate();</span><br><span class="line"><span class="keyword">var</span> currentMonth = currentDate.getMonth();</span><br><span class="line"><span class="keyword">var</span> currentYear = currentDate.getFullYear();</span><br><span class="line"><span class="comment">//现在要计算明天的日期</span></span><br><span class="line"><span class="keyword">var</span> nextDate = <span class="keyword">new</span> <span class="built_in">Date</span>(currentYear,currentMonth,currentDay+<span class="number">1</span>);</span><br><span class="line"><span class="comment">//前一天的日期</span></span><br><span class="line"><span class="keyword">var</span> preDate = <span class="keyword">new</span> <span class="built_in">Date</span>(currentYear,currentMonth,currentDay<span class="number">-1</span>);</span><br><span class="line"><span class="comment">//下个月，上个月同理</span></span><br></pre></td></tr></table></figure>
<p>无需考虑边界问题。</p>
<h4 id="3-假如给的是-2018-01-03-这种数值，传回去也要这种类型怎么办？"><a href="#3-假如给的是-2018-01-03-这种数值，传回去也要这种类型怎么办？" class="headerlink" title="3.假如给的是 2018-01-03 这种数值，传回去也要这种类型怎么办？"></a>3.假如给的是 2018-01-03 这种数值，传回去也要这种类型怎么办？</h4><p>先用 split 分隔为数组，再转换为 Number ，再进行加减，再转换为 String ,再拼接</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">data() &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    currentYear: <span class="number">2018</span>,</span><br><span class="line">    currentMonth: <span class="number">9</span>,</span><br><span class="line">    currentDay: <span class="number">1</span>,</span><br><span class="line">    currentDate: <span class="string">"2018-09-01"</span>,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line">methods: &#123;</span><br><span class="line">  currentDateSplit() &#123;  <span class="comment">//用 '-'分隔传入数组</span></span><br><span class="line">    <span class="keyword">let</span> num = [];</span><br><span class="line">    <span class="keyword">let</span> str = [];</span><br><span class="line">    <span class="keyword">let</span> current = <span class="keyword">this</span>.currentDate.split(<span class="string">"-"</span>);</span><br><span class="line">    current.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">      num.push(<span class="built_in">parseInt</span>(item));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> num;</span><br><span class="line">  &#125;,</span><br><span class="line">  newDateInit(newDate) &#123; <span class="comment">// 初始化 新生成的日期</span></span><br><span class="line">    <span class="keyword">this</span>.currentMonth = newDate.getMonth();</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.currentMonth &lt; <span class="number">10</span>) &#123;</span><br><span class="line">      <span class="keyword">this</span>.currentMonth = <span class="string">"0"</span> + <span class="keyword">this</span>.currentMonth; <span class="comment">//补齐</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.currentDay = newDate.getDate();</span><br><span class="line">    <span class="keyword">if</span> (newDate.getDate() &lt; <span class="number">10</span>) &#123;</span><br><span class="line">      <span class="keyword">this</span>.currentDay = <span class="string">"0"</span> + newDate.getDate(); <span class="comment">//补齐</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.currentYear = newDate.getFullYear();</span><br><span class="line">  &#125;,</span><br><span class="line">  preDay() &#123;  <span class="comment">//前一天</span></span><br><span class="line">    <span class="keyword">let</span> num = <span class="keyword">this</span>.currentDateSplit();</span><br><span class="line">    <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>(num[<span class="number">0</span>], num[<span class="number">1</span>], num[<span class="number">2</span>] - <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">this</span>.newDateInit(newDate);</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">  &#125;,</span><br><span class="line">  nextDay() &#123; <span class="comment">// 后一天</span></span><br><span class="line">    <span class="keyword">let</span> num = <span class="keyword">this</span>.currentDateSplit();</span><br><span class="line">    <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>(num[<span class="number">0</span>], num[<span class="number">1</span>], num[<span class="number">2</span>] + <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">this</span>.newDateInit(newDate);</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">  &#125;,</span><br><span class="line">  DateJoin() &#123; <span class="comment">//拼接为 'xxxx-xx-xx' 返回去</span></span><br><span class="line">    <span class="keyword">this</span>.currentDate = </span><br><span class="line">        <span class="keyword">this</span>.currentYear + <span class="string">"-"</span> + <span class="keyword">this</span>.currentMonth + <span class="string">"-"</span> + <span class="keyword">this</span>.currentDay;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-如何在mpvue中使用第三方UI组件" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="599cc31e.html">如何在mpvue中使用第三方UI组件</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="599cc31e.html" class="article-date">
  <time datetime="2018-08-27T06:02:43.000Z" itemprop="datePublished">2018-08-27</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>最近接触了小程序业务，了解到美团的 mpvue 也可以做小程序。</p>
<p>使用方式也很简单，和 vue 一样， 但是他会自动将 Vue 编译为 小程序 语言。</p>
<p>下面言归正传，介绍一下如何在 mpvue 中使用第三方组件。</p>
<ol>
<li><p>创建 mpvue </p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue init mpvue/mpvue-quickstart my-app</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ol start="2">
<li>以 ivew weapp UI 举例 ，进入其 github 地址，下载后将 dist 目录下的所有东西，拷贝到 my-app 下 static 的 ivew (自己创建) 目录。</li>
</ol>
<ol start="3">
<li><p>在需要使用的页面中创建 main.json。</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"usingComponents"</span>: &#123;</span><br><span class="line">    <span class="attr">"i-card"</span>: <span class="string">"../../../static/iview/card/index"</span>,</span><br><span class="line">    <span class="attr">"i-button"</span>: <span class="string">"../../../static/iview/button/index"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<ol start="4">
<li><p>接下来就可以在 index.vue 中使用该标签了。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">i-card</span> <span class="attr">full</span> <span class="attr">title</span>=<span class="string">"卡片标题"</span> <span class="attr">extra</span>=<span class="string">"额外内容"</span> <span class="attr">thumb</span>=<span class="string">"https://i.loli.net/2017/08/21/599a521472424.jpg"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">view</span> <span class="attr">slot</span>=<span class="string">"content"</span>&gt;</span>内容不错<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">view</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span>尾部内容<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">i-card</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i-button</span> <span class="attr">type</span>=<span class="string">"success"</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">i-button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-在 Vue Cli 3 中使用 px2rem" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="18e53f06.html">在 Vue Cli 3 中使用 px2rem</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="18e53f06.html" class="article-date">
  <time datetime="2018-08-25T07:16:43.000Z" itemprop="datePublished">2018-08-25</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="安装-postcss-px2rem"><a href="#安装-postcss-px2rem" class="headerlink" title="# 安装 postcss-px2rem"></a># 安装 postcss-px2rem</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add postcss-px2rem</span><br></pre></td></tr></table></figure>
<h4 id="在-vue-config-js-中添加配置"><a href="#在-vue-config-js-中添加配置" class="headerlink" title="# 在 vue.config.js 中添加配置"></a># 在 vue.config.js 中添加配置</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> px2rem = <span class="built_in">require</span>(<span class="string">'postcss-px2rem'</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> postcss = px2rem(&#123;</span><br><span class="line">  remUnit: <span class="number">32</span> 	<span class="comment">//基准大小 baseSize，需要和rem.js中相同</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  css: &#123;</span><br><span class="line">    loaderOptions: &#123;</span><br><span class="line">      postcss: &#123;</span><br><span class="line">        plugins: [</span><br><span class="line">          postcss</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="添加-rem-js"><a href="#添加-rem-js" class="headerlink" title="# 添加 rem.js"></a># 添加 rem.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基准大小</span></span><br><span class="line"><span class="keyword">const</span> baseSize = <span class="number">32</span></span><br><span class="line"><span class="comment">// 设置 rem 函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">setRem</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。</span></span><br><span class="line">  <span class="keyword">const</span> scale = <span class="built_in">document</span>.documentElement.clientWidth / <span class="number">750</span></span><br><span class="line">  <span class="comment">// 设置页面根节点字体大小</span></span><br><span class="line">  <span class="built_in">document</span>.documentElement.style.fontSize = baseSize * <span class="built_in">Math</span>.min(scale, <span class="number">2</span>) + <span class="string">'px'</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 初始化</span></span><br><span class="line">setRem()</span><br><span class="line"><span class="comment">// 改变窗口大小时重新设置 rem</span></span><br><span class="line"><span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  setRem()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="引入-rem-js"><a href="#引入-rem-js" class="headerlink" title="# 引入 rem.js"></a># 引入 rem.js</h4><ul>
<li><p>方法一：直接在 index.html 中写入语句</p>
</li>
<li><p>方法二：将 rem.js 放入 public 文件夹 ， 在 main.js 中添加以下语句</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> rem = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</span><br><span class="line">  rem.src = <span class="string">'./rem.js'</span>;</span><br><span class="line">  <span class="built_in">document</span>.body.appendChild(rem)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>
</li>
</ul>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Array" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="b3afd273.html">Array--方法</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="b3afd273.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="1-Array"><a href="#1-Array" class="headerlink" title="1.Array"></a>1.Array</h2><h4 id="1-join"><a href="#1-join" class="headerlink" title="1.join"></a>1.join</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">array.join(<span class="string">'-'</span>) <span class="comment">// 1-2-3</span></span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.join = <span class="function"><span class="keyword">function</span>(<span class="params">char</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="keyword">this</span>[<span class="number">0</span>] || <span class="string">''</span>;</span><br><span class="line">  <span class="keyword">let</span> length = <span class="keyword">this</span>.length;</span><br><span class="line">  <span class="keyword">for</span>( <span class="keyword">let</span> i = <span class="number">1</span> ; i &lt; length ; i++ )&#123;</span><br><span class="line">    result += char + <span class="keyword">this</span>[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-slice"><a href="#2-slice" class="headerlink" title="2.slice"></a>2.slice</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">array.slice(benginIndex,endIndex)</span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.slice = <span class="function"><span class="keyword">function</span>(<span class="params"> begin , end </span>)</span>&#123;</span><br><span class="line">  begin = begin || <span class="number">0</span> ;</span><br><span class="line">  end = end || <span class="keyword">this</span>.length;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = begin ; i &lt; end ; i++)&#123;</span><br><span class="line">    result.push(<span class="keyword">this</span>[i])</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>于是可以使用<code>slice</code>将伪数组转化为数组</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arraylike = <span class="string">'abcde'</span>;</span><br><span class="line"><span class="built_in">Array</span>.prototype.slice.call(arraylike) <span class="comment">//['a','b','c','d','e']</span></span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line">[].slice.call(....)</span><br></pre></td></tr></table></figure>
<p>ES6新方法 伪数组转化为数组</p>
<p><code>Array.from(arraylike)</code></p>
<p>P.S. 伪数组原型链里面没有 <code>Array.prototype</code>，所以他就没有 <code>join slice</code>等方法</p>
<h4 id="3-sort"><a href="#3-sort" class="headerlink" title="3.sort"></a>3.sort</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">3</span>,<span class="number">2</span>]</span><br><span class="line">array.sort() <span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure>
<p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.sort = <span class="function"><span class="keyword">function</span> (<span class="params">fn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> defaultfn = <span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123; <span class="keyword">return</span> a-b &#125;</span><br><span class="line">    fn = fn|| defaultfn</span><br><span class="line">    <span class="keyword">var</span> roundcount = <span class="keyword">this</span>.length; <span class="comment">//比较的轮数</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; roundcount ; i++)&#123;</span><br><span class="line">          <span class="keyword">let</span> minIndex = <span class="keyword">this</span>[i]</span><br><span class="line">          <span class="keyword">for</span>( <span class="keyword">let</span> k = <span class="number">0</span> ; k &lt; <span class="keyword">this</span>.length ; k++)&#123;</span><br><span class="line">            <span class="keyword">if</span>(fn.call( <span class="literal">null</span> , <span class="keyword">this</span>[i] , <span class="keyword">this</span>[k]) &lt; <span class="number">0</span> )&#123;  <span class="comment">// 决定了谁大谁小</span></span><br><span class="line">              [ <span class="keyword">this</span>[i] , <span class="keyword">this</span>[k] ] = [ <span class="keyword">this</span>[k] , <span class="keyword">this</span>[i] ] <span class="comment">//es6新语法，交换值</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  	<span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-foreach"><a href="#4-foreach" class="headerlink" title="4.foreach"></a>4.foreach</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.foreach = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      fn.call(<span class="literal">undefined</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) <span class="comment">// 三个参数代表了 item index array</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>for 和 foreach 的区别</p>
<ol>
<li>foreach 没有 break </li>
</ol>
<ol start="2">
<li>forEach 用到了函数，所以每次迭代都会有一个新的函数作用域；for 循环只有一个作用域 (著名前端面试题)</li>
</ol>
</blockquote>
<h4 id="5-map"><a href="#5-map" class="headerlink" title="5.map"></a>5.map</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.map = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = []</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      result[i] = fn.call(<span class="literal">undefined</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) <span class="comment">// 三个参数代表了 item index array</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>map 和 foreach 的区别就是 map 有返回值，所以推荐<strong>忘记</strong> <strong>foreach</strong></p>
<h4 id="6-filter"><a href="#6-filter" class="headerlink" title="6.filter"></a>6.filter</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.filter = <span class="function"><span class="keyword">function</span>(<span class="params">fn</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">let</span> temp;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++)&#123;</span><br><span class="line">    <span class="keyword">if</span>(temp = fn.call(<span class="literal">null</span> , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>))&#123;  <span class="comment">//如果temp的到的返回值为 true</span></span><br><span class="line">      	result.push(<span class="keyword">this</span>[i])</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>所以说 filter 就是一个加了条件的 map</strong> </p>
<h4 id="7-reduce"><a href="#7-reduce" class="headerlink" title="7.reduce"></a>7.reduce</h4><p>猜测一下源码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.reduce = <span class="function"><span class="keyword">function</span>(<span class="params">fn , init</span>)</span>&#123;  <span class="comment">// 函数 初始值(可以不传)</span></span><br><span class="line">  <span class="keyword">let</span> result = init;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span> ; i &lt; <span class="keyword">this</span>.length ; i++ )&#123;</span><br><span class="line">    <span class="keyword">if</span>(i <span class="keyword">in</span> <span class="keyword">this</span>)&#123;</span><br><span class="line">      result = fn.call(<span class="literal">undefined</span> , result , <span class="keyword">this</span>[i] , i , <span class="keyword">this</span>) </span><br><span class="line">      <span class="comment">// 后四个参数  当前累计值，当前值，序列，该数组</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a  = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line">a.reduce( <span class="function">(<span class="params">result,currentValue,currentIndex,array</span>)=&gt;</span>&#123; <span class="keyword">return</span> result + currentValue &#125; , <span class="number">0</span> ) </span><br><span class="line"><span class="comment">//累加 10</span></span><br></pre></td></tr></table></figure>
<p>####8.总结</p>
<p><em>关于 map , filter , reduce之间的关系</em></p>
<p><strong>用reduce实现map</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">array.map(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;<span class="keyword">return</span> item+<span class="number">1</span>&#125;);</span><br><span class="line">array.reduce(<span class="function">(<span class="params">result,item</span>)=&gt;</span>&#123;</span><br><span class="line">	result.push(item+<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">return</span> result ; </span><br><span class="line">&#125;,[])<span class="comment">//result的初始值设置为 []</span></span><br></pre></td></tr></table></figure>
<p><strong>用reduce实现filter</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> array = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line">array.filter(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;<span class="keyword">return</span> item%<span class="number">2</span> === <span class="number">0</span>&#125;);</span><br><span class="line">array.reduce(<span class="function">(<span class="params">result,item</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(item%<span class="number">2</span> === <span class="number">0</span>)&#123;</span><br><span class="line">    result.push(item)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result</span><br><span class="line">&#125;,[])</span><br></pre></td></tr></table></figure>
<p><strong>结论，其实foreach,map,filter都是由reduce实现，reduce是最关键的。</strong></p>
<h2 id="2-underscore-js"><a href="#2-underscore-js" class="headerlink" title="2.underscore.js"></a>2.underscore.js</h2><h4 id="1-underscore是什么"><a href="#1-underscore是什么" class="headerlink" title="1.underscore是什么"></a>1.underscore是什么</h4><p>underscore是一个集合操作的库(数组和对象)</p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-异步" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="f6d05227.html">JavaScript中的异步</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="f6d05227.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="异步—代码烧脑的原因"><a href="#异步—代码烧脑的原因" class="headerlink" title="异步—代码烧脑的原因"></a>异步—代码烧脑的原因</h2><h3 id="1-同步和异步"><a href="#1-同步和异步" class="headerlink" title="1.同步和异步"></a>1.同步和异步</h3><p>同步：等待结果</p>
<p>异步： 不等待结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//同步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">seconds</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">  <span class="keyword">while</span>(<span class="keyword">new</span> <span class="built_in">Date</span>() - a &lt; seconds * <span class="number">1000</span>)&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">sleep(<span class="number">3</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'wake up'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line"><span class="comment">//运行结果 1 wake up 2</span></span><br><span class="line"><span class="comment">// 同步是需要等待的，但是 JavaScript 没有这一项功能，所以只能让他不停的工作，然后到达3秒钟</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 异步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">seconds,fn</span>)</span>&#123;</span><br><span class="line">  setTimeout(fn,seconds * <span class="number">1000</span>); <span class="comment">// 实际上是在设置闹钟，让浏览器 xx秒 后执行 fn</span></span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">sleep(<span class="number">3</span>,()=&gt;&#123;<span class="built_in">console</span>.log(<span class="string">'wake up '</span>)&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line"><span class="comment">//运行结果 1 2 wake up</span></span><br><span class="line"><span class="comment">// 为什么 setTimeout 可以模拟异步？ 因为 setTimeout 方法是浏览器提供并负责执行的，JS告诉浏览器3S以后执行fn,然后它就可以去干下一步事情了。</span></span><br></pre></td></tr></table></figure>
<p>可以看出，使用异步，JS空闲了很多。</p>
<p>但是注意，JS空闲的时间，浏览器的计数器一直在工作。</p>
<h3 id="2-前端经常用到的异步"><a href="#2-前端经常用到的异步" class="headerlink" title="2.前端经常用到的异步"></a>2.前端经常用到的异步</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> w = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'img'</span>)[<span class="number">0</span>].width;</span><br><span class="line"><span class="built_in">console</span>.log(w) <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>
<p>明明有图片，为什么宽度为0呢？</p>
<p>因为图片加载需要时间。</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<p>注意把 Network 的缓存禁用，可以看到效果</p>
<h4 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h4><p>在图片加载完成后会有一个 <code>onload</code>事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> img = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'img'</span>)[<span class="number">0</span>];</span><br><span class="line">img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(img.width) <span class="comment">//400</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3-遍历的异步"><a href="#3-遍历的异步" class="headerlink" title="3.遍历的异步"></a>3.遍历的异步</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> li_List =<span class="built_in">document</span>.querySelectorAll(<span class="string">'li'</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;li_List.length;i++)&#123;</span><br><span class="line">  li_List[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//期望值：点击哪一个 li ， 就会出现该 li 的序号</span></span><br><span class="line"><span class="comment">//结果：打印出的结果会全部都是 n+1</span></span><br><span class="line"><span class="comment">//原因：var i= 0，变量声明提升，会导致循环里用的都是一个 i ，i 最后循环结果会变为 n+1 </span></span><br><span class="line"><span class="comment">//解决方法: let i = 0 ,let 在每次循环的时候都会制造一个分身，绑定到该 li_List[i]上</span></span><br><span class="line"><span class="comment">//哪里的异步？ li_List[i].onClick = function()&#123;&#125; JS没有功夫等你触发 onclick 事件，直接进行了下一步 i++</span></span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="4-AJAX中的异步"><a href="#4-AJAX中的异步" class="headerlink" title="4.AJAX中的异步"></a>4.AJAX中的异步</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> requsest = $.ajax(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">false</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(request.responseText);</span><br><span class="line"><span class="comment">//同步的ajax ， 在请求过程中，JS会一直等待响应，非常浪费资源</span></span><br><span class="line"></span><br><span class="line">$.ajax(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">true</span>,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'OK'</span>)</span><br><span class="line"><span class="comment">//结果 ： OK  res</span></span><br><span class="line"><span class="comment">//异步的ajax </span></span><br><span class="line"><span class="comment">// 为什么使用 success 接收请求？ 因为这是异步的，使用 var xx = $.ajax(&#123;&#125;) 是得不到任何数据的，所以我们告诉浏览器，当接收到请求的时候再用 success 处理</span></span><br></pre></td></tr></table></figure>
<h3 id="5-异步拿到结果的形式"><a href="#5-异步拿到结果的形式" class="headerlink" title="5.异步拿到结果的形式"></a>5.异步拿到结果的形式</h3><p>两种方式</p>
<ol>
<li>轮训 ：不推荐 </li>
<li>回调 ：推荐</li>
</ol>
<h4 id="回调的形式"><a href="#回调的形式" class="headerlink" title="回调的形式"></a>回调的形式</h4><p>1.nodejs的 error-first 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'./1.txt'</span>,(error,content)=&gt;&#123;</span><br><span class="line">  <span class="keyword">if</span>(error)&#123;</span><br><span class="line">    <span class="comment">//error</span></span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">//success</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>2.Jquery 的 success-error 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">  url:<span class="string">''</span>,</span><br><span class="line">  success:<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;,</span><br><span class="line">  error:<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>3.Jquery的 done/fail/always形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line"></span><br><span class="line">url:<span class="string">'xxx'</span></span><br><span class="line"></span><br><span class="line">&#125;) . done( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; ) . fail( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; ).always( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; )</span><br></pre></td></tr></table></figure>
<p>4.Promise 的 then 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line"></span><br><span class="line">url:<span class="string">'xxxx'</span></span><br><span class="line"></span><br><span class="line">&#125;).then( <span class="function"><span class="params">()</span>=&gt;</span>&#123; success &#125; ,()=&gt;&#123; fail &#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="6-Promise的错误处理"><a href="#6-Promise的错误处理" class="headerlink" title="6.Promise的错误处理"></a>6.Promise的错误处理</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">true</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">x</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'succ1'</span>)</span><br><span class="line">  <span class="keyword">return</span> <span class="string">'aaaaa'</span></span><br><span class="line">&#125;,(y)=&gt;&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'err1'</span>)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">x</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'succ2'</span>,x) <span class="comment">// succ2 aaaa</span></span><br><span class="line">&#125;,(y)=&gt;&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'err2'</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(y)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>succ1和err1中的代码任意一个有错误，都由err2来处理 , err2的第一个参数可以接受错误值</p>
<p>succ1成功，转入succ2</p>
<p>succ1 return 的值会传入 succ2的参数</p>
<p>手动失败 <code>return Promise.reject(&#39;xxx&#39;)</code></p>
<p>catch可以放在最后搞定之前没写 失败函数的then ，但是 .catch((err)=&gt;{}) ===  .then(undefined,(err)=&gt;{})</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="7-手写一个Promise"><a href="#7-手写一个Promise" class="headerlink" title="7.手写一个Promise"></a>7.手写一个Promise</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resovle,reject</span>)=&gt;</span>&#123;</span><br><span class="line">    	<span class="comment">//做事情</span></span><br><span class="line">    	<span class="comment">// 成功resovle</span></span><br><span class="line">    	<span class="comment">// 失败 reject</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">      res(<span class="string">'apple'</span>)</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line">buy().then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;<span class="built_in">console</span>.log(res)&#125;,(err)=&gt;&#123;<span class="built_in">console</span>.log(err)&#125;)</span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="8-async-await"><a href="#8-async-await" class="headerlink" title="8.async/await"></a>8.async/await</h3><p>以同步的方式写异步</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">      res(<span class="string">'apple'</span>)</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> res = <span class="keyword">await</span> buy();</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-封装和继承" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="6936d1ca.html">封装和继承</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="6936d1ca.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="1-封装和继承"><a href="#1-封装和继承" class="headerlink" title="1.封装和继承"></a>1.封装和继承</h3><p>​    i 封装</p>
<p>​    为了隐藏细节</p>
<p>​    ii 继承</p>
<p>​    为了复用代码</p>
<p>​    iii 多态</p>
<p>​    灵活</p>
<p>####1.1原型链(对象与对象之间的关系)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = &#123;<span class="attr">name</span>:<span class="string">'1'</span>&#125;;</span><br><span class="line"><span class="built_in">window</span>.Object.prototype === obj.__proto__; <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p><img src="https://storm4542.github.io/imgaes/%E5%8E%9F%E5%9E%8B%E9%93%BE.png" alt="原型链"></p>
<p>上面的原型链图形象的表示了他们之间的关系，说白了就是大家都共用同一个 “ 仓库” , 所有对象都共用 <strong>Object</strong>的原型，他们各自又有自己的 “ 仓库” </p>
<p><code>arr1.__proto__ === window.Array.prototype</code> 自己的 Array 仓库，里面有 join ,splice 等方法</p>
<p><code>arr1.__proto__.__proto__ === window.Object.prototype</code>  Object的仓库，里面有 toString , valueOf 等方法</p>
<p><strong>Object 是所有对象的最底层的原型。</strong></p>
<h4 id="1-2this-对象与函数之间的关系"><a href="#1-2this-对象与函数之间的关系" class="headerlink" title="1.2this(对象与函数之间的关系)"></a>1.2this(对象与函数之间的关系)</h4><p>函数： 可执行代码组成的一种对象</p>
<p>所有使用 <code>function</code>声明的函数都只有两个参数 this 和 arguments,</p>
<p><strong>一定要记住</strong></p>
<blockquote>
<p><strong>1.参数的值只有传参的时候才能确定</strong></p>
<p><strong>2.this 是call()的第一个参数 </strong></p>
<p><strong>=&gt; this 的值只有在传参的时候才能确定</strong></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">	name:<span class="string">'mayun'</span>,</span><br><span class="line">    child:&#123;</span><br><span class="line">      name:<span class="string">'sicong'</span>,</span><br><span class="line">      sayName:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>.name)&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">obj.child.sayName() <span class="comment">//sicong this === obj.child  就是函数的 点 前面的所有</span></span><br><span class="line">obj.child.sayName.call(obj) <span class="comment">// mayun 因为 this === obj  obj.name === 'mayun'</span></span><br><span class="line"><span class="comment">//因此我们也可以看出 function()&#123;&#125; 跟这个 sayName 一点关系都没有， sayName 只是存了 function()&#123;&#125; 的地址而已</span></span><br><span class="line"><span class="comment">//更直观点</span></span><br><span class="line">obj.child.sayName.call(&#123;<span class="attr">name</span>:<span class="string">'wtf'</span>&#125;) <span class="comment">//wtf</span></span><br></pre></td></tr></table></figure>
<p>来几个题试试</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; f()</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123; ‘use strict’ <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; f()</span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">sayThis</span>:f&#125; ; obj.sayThis()</span><br><span class="line"><span class="keyword">var</span> obj = &#123;<span class="attr">sayThis</span>:f&#125; ; obj.sayThis.call()</span><br><span class="line">button.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;</span><br><span class="line">$(<span class="string">'#test'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;)</span><br><span class="line">$(<span class="string">'#ul1'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;)</span><br><span class="line">varvm = <span class="keyword">new</span> Vue(&#123;<span class="attr">data</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;&#125;)</span><br></pre></td></tr></table></figure>
<p>答案</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>不确定，因为没有传参啊	</span><br><span class="line"><span class="number">2.</span><span class="built_in">window</span></span><br><span class="line"><span class="number">3.</span><span class="literal">undefined</span>(use strict)</span><br><span class="line"><span class="number">4.</span>obj <span class="comment">// . 前面的</span></span><br><span class="line"><span class="number">5.</span><span class="built_in">window</span>/<span class="literal">undefined</span></span><br><span class="line"><span class="number">6.</span>button <span class="comment">//浏览器保证的，只要点击了，this === button </span></span><br><span class="line"><span class="number">7.</span>$(<span class="string">'#test'</span>) <span class="comment">//JQ文档写的 this指向了当前正在执行事件的元素</span></span><br><span class="line"><span class="number">8.</span>li <span class="comment">//JQ文档 this 代表了与 selector 相匹配的元素</span></span><br><span class="line"><span class="number">9.</span><span class="keyword">new</span> 出来的对象 vm <span class="comment">//文档说的,因为它call了new 出来的东西</span></span><br></pre></td></tr></table></figure>
<h1 id="那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！"><a href="#那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！" class="headerlink" title="那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！"></a>那么这么蛋疼的this为什么还要用它，我们要用箭头函数！！</h1><p>箭头函数自己没有 <code>this</code>和<code>arguments</code></p>
<p>它的 this  是外面的 this </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="params">()</span>=&gt;</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125; f() <span class="comment">//window </span></span><br><span class="line"><span class="keyword">var</span> obj = &#123; <span class="attr">sayThis</span> : <span class="function"><span class="params">()</span>=&gt;</span>&#123;<span class="built_in">console</span>.log(<span class="keyword">this</span>)&#125;&#125; ; obj.sayThis </span><br><span class="line"><span class="comment">// window ( 如果是function 那就是obj了) </span></span><br><span class="line"><span class="comment">//因为obj的this是window，所以里面的也是window, ()=&gt;&#123;&#125; 不接收this，也不修改this,外面是什么，它就是什么</span></span><br></pre></td></tr></table></figure>
<h4 id="1-3-bind是什么"><a href="#1-3-bind是什么" class="headerlink" title="1.3 bind是什么"></a>1.3 bind是什么</h4><p>先看下MDN的定义</p>
<blockquote>
<p><code>bind()</code>方法创建一个新的函数, 当被调用时，将其<code>this</code>关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。</p>
</blockquote>
<p>做几个实验</p>
<figure class="highlight javascript"><figcaption><span>//</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) &#125; <span class="comment">//this是啥？不知道</span></span><br><span class="line">fn1()<span class="comment">// 哦，this 是 window</span></span><br><span class="line">fn1.call(<span class="number">1</span>) <span class="comment">// this又是 Number(1) 了</span></span><br><span class="line"><span class="comment">//我想写一个直接就知道this是什么的函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params"></span>)</span>&#123; fn1.call(<span class="number">1</span>) &#125; <span class="comment">//this 肯定是 Number(1) ，我都钦定了,但是这么写有点啰嗦，JS帮我整个方法</span></span><br><span class="line"><span class="keyword">var</span> fn3 = fn1.bind(<span class="number">1</span>) ; fn3()  <span class="comment">// Number(1)</span></span><br></pre></td></tr></table></figure>
<p><strong>上面我们说到了，this 其实只是函数的第一个参数而已，第二个参数是arguments，我能不能也钦定一下子？</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>)</span>&#123; <span class="built_in">console</span>.log(<span class="keyword">this</span>) ;<span class="built_in">console</span>.log(<span class="built_in">arguments</span>) &#125; </span><br><span class="line">fn1() <span class="comment">// window []</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params"></span>)</span>&#123; fn1.call(<span class="number">1</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>) &#125; </span><br><span class="line">fn2()<span class="comment">// Number(1) ['a','b','c']</span></span><br><span class="line"><span class="comment">//那这样的话，bind是不是也能指定arguments呢？</span></span><br><span class="line"><span class="keyword">var</span> fn3 = fn1.bind(<span class="number">1</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>);</span><br><span class="line">fn3()<span class="comment">// Number(1) ['a','b','c']</span></span><br></pre></td></tr></table></figure>
<p><strong>所以说<code>bind（）</code>就是返回了一个函数，这个函数 call 原来的函数，而call的值你可以自己指定</strong></p>
<h4 id="1-4-new-是什么"><a href="#1-4-new-是什么" class="headerlink" title="1.4 new 是什么"></a>1.4 new 是什么</h4><h5 id="1-4-1-为什么要有-new-，我们的需求"><a href="#1-4-1-为什么要有-new-，我们的需求" class="headerlink" title="1.4.1 为什么要有 new ，我们的需求"></a>1.4.1 为什么要有 new ，我们的需求</h5><p>​    我们想要 批量创建对象 </p>
<h5 id="1-4-2"><a href="#1-4-2" class="headerlink" title="1.4.2"></a>1.4.2</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Solider</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.ID = i</span><br><span class="line">    <span class="keyword">this</span>.name = name || <span class="string">'no name'</span>;</span><br><span class="line">    <span class="keyword">this</span>.life = <span class="number">42</span></span><br><span class="line">&#125;</span><br><span class="line">Solider.prototype.兵种 = <span class="string">'解放军'</span>;</span><br><span class="line">Solider.prototype.攻击力 = <span class="number">100</span>;</span><br><span class="line">Solider.prototype.攻击 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123; &#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> soliders = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span> ; i &lt; <span class="number">100</span> ; i++)&#123;</span><br><span class="line">    soliders.push( <span class="keyword">new</span> Solider() )</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(soliders)</span><br></pre></td></tr></table></figure>
<p>习俗：</p>
<ol>
<li><p>构造函数首字母大学</p>
<pre><code>2. 构造函数可以省略掉 create
3. 如果构造函数没有参数，可以省略括号。
</code></pre></li>
</ol>
<h3 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h3><h5 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//prototype和 __proto__的区别	</span></span><br><span class="line"><span class="comment">//prototype是函数特有的属性 </span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">a.prototype</span><br><span class="line"><span class="comment">//访问 __proto__需要 a.prototype.__proto__</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">a.__proto__ = <span class="built_in">Number</span>&#123;&#125;;</span><br><span class="line">a.prototype = <span class="literal">undefined</span></span><br></pre></td></tr></table></figure>
<p>ES5</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Human</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//this = &#123;&#125;</span></span><br><span class="line">    <span class="comment">//this.__proto__ = Human.prototype JS之父的关怀。将这个空对象this的公有属性连上了 Human的公有属性</span></span><br><span class="line">    <span class="keyword">this</span>.name = options.name;</span><br><span class="line">    <span class="keyword">this</span>.肤色 = options.肤色 <span class="comment">//特有属性</span></span><br><span class="line">    <span class="comment">//return this 都是 JS之父的关怀</span></span><br><span class="line">&#125;</span><br><span class="line">Human.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;; <span class="comment">//公有属性</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Solider</span>(<span class="params">options,id</span>)</span>&#123;</span><br><span class="line">    Human.call(<span class="keyword">this</span>,options) <span class="comment">//用Solider里的this,放到 Human 里面用，这样Soilder就有了 name 和 say 的特有属性</span></span><br><span class="line">    <span class="keyword">this</span>.id = id;</span><br><span class="line">    <span class="keyword">this</span>.life = <span class="number">42</span>;</span><br><span class="line">&#125;</span><br><span class="line">Solider.prototype.attack = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line"><span class="comment">//Solider.prototype.__proto__ = Human.prototype; 生产环境不能用</span></span><br><span class="line"><span class="comment">//但是 new 可以用，看看上面JS之父的关怀，我们换一种写法</span></span><br><span class="line"><span class="comment">//兼容IE</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fakeHuman</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fakeHuman.prototype = Human.prototype;</span><br><span class="line">Solider.prototype = <span class="keyword">new</span> fakeHuman()</span><br><span class="line"><span class="comment">//Solider.prototype === fakeHuman.prototype === Human.prototype;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//不兼容IE</span></span><br><span class="line">Solider.prototype = <span class="built_in">Object</span>.create(Human.prototype);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Solider(&#123;<span class="attr">name</span>:<span class="string">'小小'</span>,肤色:<span class="string">'yellow'</span>&#125;,<span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<p>ES6</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Human</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options) &#123;</span><br><span class="line">        <span class="keyword">this</span>.name = options.name</span><br><span class="line">        <span class="keyword">this</span>.肤色 = options.肤色</span><br><span class="line">    &#125;</span><br><span class="line">    eat() &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Solider</span> <span class="keyword">extends</span> <span class="title">Human</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options, id) &#123;</span><br><span class="line">        <span class="keyword">super</span>(options)</span><br><span class="line">        <span class="keyword">this</span>.id = id,</span><br><span class="line">            <span class="keyword">this</span>.life = <span class="number">42</span></span><br><span class="line">    &#125;</span><br><span class="line">    attack() &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Solider(&#123;<span class="attr">name</span>:<span class="string">'小小'</span>,肤色:<span class="string">'yellow'</span>&#125;,<span class="number">10</span>)</span><br></pre></td></tr></table></figure>
<p>作业题1</p>
<p>要求不使用 class，完成如下需求：</p>
<p>写出一个构造函数 Animal<br>输入为一个对象，如 {物种:’xxx’}<br>输出为一个新对象，该对象的共有属性为 {物种:’xxx’,行动: function(){}}，没有自有属性<br>再写出一个构造函数 Human<br>Human 继承 Animal<br>输入为一个对象，如 {name: ‘Frank’, birthday: ‘2000-10-10’}<br>输出为一个新对象，该对象自有的属性有 name 和 birthday，共有的属性有物种、行动和使用工具<br>在写出一个构造函数 Asian<br>Asian 继承 Human<br>输入为一个对象，如 {city: ‘北京’, name: ‘Frank’, birthday: ‘2000-10-10’ }<br>输出为一个新对象，改对象自有的属性有 name city 和 bitrhday，共有的属性有物种、行动和使用工具和肤色<br>既</p>
<p>最后一个新对象是 Asian 构造出来的<br>Asian 继承 Human，Human 继承 Animal<br>注意，不要使用 class 关键字，使用课上讲的原型链</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Animal.prototype.行动 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Human</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = options.name;</span><br><span class="line">    <span class="keyword">this</span>.birthday = options.birthday;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Human.prototype = Object.create(Animal.prototype)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fake</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fake.prototype = Animal.prototype;</span><br><span class="line">Human.prototype = <span class="keyword">new</span> fake();</span><br><span class="line"><span class="comment">//关键点 此时Human.prototype.constructor指向function Animal()&#123;&#125;</span></span><br><span class="line"><span class="comment">//因此需要改变constructor指向Human</span></span><br><span class="line">Human.prototype.constructor = Human</span><br><span class="line">Human.prototype.物种 = <span class="string">'人类'</span>;</span><br><span class="line">Human.prototype.使用工具 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> Human(&#123;</span><br><span class="line">    name: <span class="string">'Frank'</span>,</span><br><span class="line">    birthday: <span class="string">'2000-10-10'</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Asian</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//关键点，将Human的特有属性，放到Asian来</span></span><br><span class="line">    Human.call(<span class="keyword">this</span>, options)</span><br><span class="line">    <span class="keyword">this</span>.city = options.city;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">Asian.prototype.肤色 = <span class="string">'yellow'</span></span><br><span class="line"><span class="comment">//继承的关键点</span></span><br><span class="line"><span class="comment">// Asian.prototype = Object.create(Human.prototype)</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fake2</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">fake2.prototype = Human.prototype;</span><br><span class="line">Asian.prototype = <span class="keyword">new</span> fake2();</span><br><span class="line"><span class="comment">//修改 constructor 的指向</span></span><br><span class="line">Asian.prototype.constructor = Asian</span><br><span class="line">Asian.prototype.肤色 = <span class="string">'yellow'</span></span><br><span class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> Asian(&#123;</span><br><span class="line">    city: <span class="string">'北京'</span>,</span><br><span class="line">    name: <span class="string">'Frank'</span>,</span><br><span class="line">    birthday: <span class="string">'2000-10-10'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>作业题2</p>
<p>要求使用 class，完成如下需求：</p>
<p>写出一个构造函数 Animal<br>输入为一个对象，如 {物种:’xxx’}<br>输出为一个新对象，该对象的共有属性为 {行动: function(){}}，自有属性为 {物种:’xxx’}<br>再写出一个构造函数 Human<br>Human 继承 Animal<br>输入为一个对象，如 {name: ‘Frank’, birthday: ‘2000-10-10’}<br>输出为一个新对象，该对象自有的属性有 name、物种和 birthday，共有的属性有行动和使用工具<br>在写出一个构造函数 Asian<br>Asian 继承 Human<br>输入为一个对象，如 {city: ‘北京’, name: ‘Frank’, birthday: ‘2000-10-10’ }<br>输出为一个新对象，改对象自有的属性有 name city 物种 肤色和 bitrhday，共有的属性有行动和使用工具<br>既</p>
<p>最后一个新对象是 Asian 构造出来的<br>Asian 继承 Human，Human 继承 Animal<br>注意，要使用 class 关键字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">   <span class="keyword">constructor</span>()&#123;</span><br><span class="line"></span><br><span class="line">   &#125;</span><br><span class="line">   行动()&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Human</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">super</span>()</span><br><span class="line">        <span class="keyword">this</span>.name = options.name</span><br><span class="line">        <span class="keyword">this</span>.birthday = options.birthday</span><br><span class="line">    &#125;</span><br><span class="line">    使用工具()&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Asian</span> <span class="keyword">extends</span> <span class="title">Human</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(options)&#123;</span><br><span class="line">        <span class="keyword">super</span>(options)</span><br><span class="line">        <span class="keyword">this</span>.city = options.city</span><br><span class="line">        <span class="keyword">this</span>.物种 = <span class="string">'人类'</span></span><br><span class="line">        <span class="keyword">this</span>.肤色 = <span class="string">'黄色'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> h = <span class="keyword">new</span> Asian(&#123;<span class="attr">city</span>: <span class="string">'北京'</span>, <span class="attr">name</span>: <span class="string">'Frank'</span>, <span class="attr">birthday</span>: <span class="string">'2000-10-10'</span> &#125;)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-制作一个vue的tabs轮子" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="88d55ab5.html">制作一个基于Vue的Tabs轮子</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="88d55ab5.html" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="tabs轮子制作"><a href="#tabs轮子制作" class="headerlink" title="tabs轮子制作"></a>tabs轮子制作</h3><h4 id="1-先简单实现一下"><a href="#1-先简单实现一下" class="headerlink" title="1.先简单实现一下"></a>1.先简单实现一下</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">'app'</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span>&#123;<span class="attribute">background</span>:red&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">       &lt;div class="tabs"&gt;</span></span><br><span class="line"><span class="string">            &lt;ol class="nav"&gt;</span></span><br><span class="line"><span class="string">                &lt;li @click = 'selectedTab = 1' :class ='&#123; active: selectedTab === 1 &#125;'  &gt;tab1&lt;/li&gt;</span></span><br><span class="line"><span class="string">                &lt;li @click = 'selectedTab = 2' :class ='&#123; active: selectedTab === 2 &#125;' &gt;tab2&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;/ol&gt;</span></span><br><span class="line"><span class="string">            &lt;ol class="panels"&gt;</span></span><br><span class="line"><span class="string">                &lt;li :class = '&#123;active : selectedTab === 1&#125;' &gt;content1&lt;/li&gt;</span></span><br><span class="line"><span class="string">                &lt;li :class = '&#123; active: selectedTab === 2 &#125;' &gt;content2 &lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;/ol&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>很简单，但是没有复用性。</p>
<h4 id="2-轮子的实现"><a href="#2-轮子的实现" class="headerlink" title="2.轮子的实现"></a>2.轮子的实现</h4><ul>
<li><p>思路：用户如何使用我这个组件呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>差不多这样调用，其他的不用管，一个tabs就出来了</p>
</li>
<li><p>开始写，我先声明这些tabs的组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-navs'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-panels'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>,&#123;&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>现在有个问题，我怎么知道要选中那个tab呢?用1，2不大好，所以，改为字符串,并且给下面加上<code>name</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'selectedTab'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div class='tabs'&gt;</span></span><br><span class="line"><span class="string">            &lt;slot/&gt;  //注意有子元素的话，添加 插槽</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-navs'</span>,&#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs-item'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-panels'</span>,&#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels-item'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab = 'tab1'&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样就初见雏形了</p>
</li>
<li><p>下面就是重点了，孙子怎么知道爷爷的 <code>selectedTab</code>的值呢？</p>
<p>答案是通过孙子的爸爸，爸爸获得<code>selectedTab</code>，然后再给孙子，</p>
<p>问题又来了，爸爸怎么从爷爷那里获得呢？</p>
<p><strong>孙子，爸爸自己定义一个属性<code>selectedTab</code>，再写一个<code>methods: SelectedTab(tab)</code>，爷爷遍历所有的爸爸，然后调用爸爸的<code>SelectedTab(tab)</code>把爷爷的<code>selectedTab</code>传给爸爸的<code>selectedTab</code>，同理，爸爸再用同样的方式传给孙子。</strong></p>
<p>P.S 爷爷：<code>tabs</code> ， 爸爸 ： <code>tabs-navs</code> , 孙子: <code>tabs-navs-item</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'selectedTab'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div class='tabs'&gt;</span></span><br><span class="line"><span class="string">            &lt;slot/&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123; <span class="comment">//遍历所有的孩子</span></span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123; <span class="comment">//如果是爸爸</span></span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'爷爷的selectedTab是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab) <span class="comment">//通过爸爸的selectedTab方法，传给儿子</span></span><br><span class="line">            &#125;<span class="keyword">else</span> <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-panels'</span>)&#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs'</span>, &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="literal">undefined</span> <span class="comment">//爸爸自己有一个selectedTab属性       </span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        SelectedTab(tab) &#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab <span class="comment">//通过这个方法，从爷爷那里获取selectedTab</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'爸爸获取到了爷爷的selectedTab是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>)=&gt;</span>&#123; <span class="comment">//同样的方法传给孙子</span></span><br><span class="line">                <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-navs-item'</span>)&#123;</span><br><span class="line">                    vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span>      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs-item' :class = '&#123;active&#125;'&gt;   //通过计算属性，判断active</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    computed: &#123;</span><br><span class="line">        active() &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.selectedTab === <span class="keyword">this</span>.name  <span class="comment">//通过计算属性，判断active</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'儿子获取到了从爸爸的selected是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels'</span>, &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span>       </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab;</span><br><span class="line">            <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>)=&gt;</span>&#123; <span class="comment">//同样的方法传给孙子</span></span><br><span class="line">                <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-panels-item'</span>)&#123;</span><br><span class="line">                    vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels-item' :class = '&#123;active&#125;'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        active()&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.selectedTab === <span class="keyword">this</span>.name</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab = 'tab1'&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样，<code>selectedTab</code>  整个传递的线路，我们就打通了。<code>tabs-panels</code>的方法同理</p>
</li>
<li><p>下面也是重点，我点击<code>tabs-navs-item</code>的时候，孙子要告诉爷爷该切换了，但孙子不能直接告诉爷爷，先告诉爸爸，爸爸再告诉爷爷。</p>
<p><strong>注意：Vue没有冒泡，孙子触发的$emit事件，爸爸是不知道的，所以要用爸爸监听$on孙子，爷爷监听$on爸爸，然后爷    爷再把数据传出去update()</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//孙子</span></span><br><span class="line">onClick()&#123;</span><br><span class="line">    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>, <span class="keyword">this</span>.name) </span><br><span class="line">    <span class="comment">//孙子传出去。</span></span><br><span class="line">    <span class="comment">//name = 'tab1'的作用在这里体现，之前的vm.$options.name其实是 component 的 name</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//爸爸</span></span><br><span class="line">mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs-item'</span>) &#123;</span><br><span class="line">                vm.$on(<span class="string">'update:selectedTab'</span>, (e) =&gt; &#123; <span class="comment">//监听儿子的 update：selectedTab</span></span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">'爸爸知道了你要更新selectedTab是'</span> + e)</span><br><span class="line">                    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>, e) <span class="comment">//爸爸传给爷爷需要改的数</span></span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">//爷爷</span></span><br><span class="line">mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123; <span class="comment">//遍历所有的孩子</span></span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'爷爷的selectedTab是'</span> + <span class="keyword">this</span>.selectedTab)</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab) <span class="comment">//通过儿子的selectedTab方法，传给儿子</span></span><br><span class="line">                <span class="comment">//爷爷监听爸爸的update，更新selectedTab属性，更新操作在updatde里面做</span></span><br><span class="line">                vm.$on(<span class="string">'update:selectedTab'</span>,(e)=&gt;&#123; </span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">'爷爷知道了爸爸给我的selectedTab是'</span> + e)                    </span><br><span class="line">                    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>,e)</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-panels'</span>) &#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">updated() &#123;  <span class="comment">//更新selectedTab</span></span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123;    </span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-panels'</span>) &#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//然后体现在 template 里 ，使用 .sync 修饰符</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            value: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab.sync = 'value' &gt;  // 在这里更新</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
</ul>

      

      
        
    </div>
  </div>
  
</article>



  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="index.html">&laquo; Prev</a><a class="page-number" href="index.html">1</a><span class="page-number current">2</span><a class="page-number" href="index4.html">3</a><a class="page-number" href="index5.html">4</a><a class="extend next" rel="next" href="index4.html">Next &raquo;</a>
    </nav>
  
</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
